<template >
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="ModelAddWinDialogVisible"
      title="添加检测模板"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newModel" label-width="auto">

        <el-row>
          <el-col :span="12">
            <el-form-item  label="模板编号">
              <el-input  v-model="newModel.modelEncode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="模板名称">
              <el-input  v-model="newModel.modelName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测种类" >
              <el-checkbox-group v-model="newModelArr">
                <el-checkbox label="[来料检验]" value="[来料检验]" />
                <el-checkbox label="[过程检验]" value="[过程检验]" />
                <el-checkbox label="[首检]" value="[首检]" />
                <el-checkbox label="[末检]" value="[末检]" />
                <el-checkbox label="[巡检]" value="[巡检]" />
                <el-checkbox label="[自检]" value="[自检]" />
                <el-checkbox label="[成品检验]" value="[成品检验]" />
                <el-checkbox label="[发货检验]"  />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" >
            <el-radio-group v-model="newModel.modelEnable">
              <el-radio label="0" value="0">否</el-radio>
              <el-radio label="1" value="1">是</el-radio>
            </el-radio-group>
<!--              <el-checkbox-group v-model="newModel.modelEnable">-->
<!--                <el-checkbox label="否" value="否" />-->
<!--                <el-checkbox label="是" value="是" />-->
<!--              </el-checkbox-group>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="cancelnewModel">取消</el-button>
        <el-button type="primary" @click="newModelSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'
import loginRequest from "@/api/login.js";
import {ElMessage} from "element-plus";
import qualityRequest from "@/api/quality.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelDetectAdd'])
// 弹窗标记
let ModelAddWinDialogVisible = ref(false);
let props = defineProps(["model","isShow"]);
// 新增的项目对象
let newModel = ref({})
//用来存储前端的检测种类然后转换为字符串存到newModel.value.modelType中
let newModelArr=ref([])
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})


/**
 * 取消编辑按钮事件
 */
function cancelnewModel(){
  newModel = ref({});
  ModelAddWinDialogVisible.value = false;
  emits("cancelDetectAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  emits("cancelTaskAdd")
}
/**
 * 确定按钮
 */
function newModelSubmit(){
newModel.value.modelType=newModelArr.value.join(',')
  console.log("modelType的值为:"+newModel.value.modelType)
  qualityRequest.insertModel(newModel.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"新增成功"
      });
      // 关闭弹窗
      cancelnewModel();

      // 触发新增完成的事件
      emits('addComplete',res.data);
    }else{
      ElMessage({
        type:"warning",
        message:"新增失败"
      });
    }
  })
}
/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  ModelAddWinDialogVisible.value = props.isShow;
});

</script>
<style scoped>

</style>